<template>
  <view class="cateContainer">
    <!-- 搜索组件 S-->
    <mySearch id="mySearch" v-if="searchShow"></mySearch>
    <!-- 搜索组件 E-->
    <!-- 容器区域 S -->
    <view class="boxContainer" :style="'height:'+(wh-searchHeight)+'px'">
      <!-- 左侧 S-->
      <scroll-view scroll-y class="nav">
        <view v-for="item in cateList" :key="item.id" @click="changeActive(item)"
          :class="{ active:activeCate.id===item.id }">{{item.name}}</view>
      </scroll-view>
      <!-- 左侧 E-->
      <!-- 右侧 S-->
      <view class="cate">
        <!-- 图片 -->
        <image class="cateImg" :src="activeCate.img_url">
          </u--image>
          <!-- 滚动商品容器 S-->
          <scroll-view @scrolltolower="loadMore" scroll-y class="listBox"
            :style="'height:'+(wh-searchHeight-imgHeight)+'px'">
            <!-- 商品列表 -->
            <goodList v-if="list.length" :list='list'></goodList>
            <u-loadmore :status="status" v-if="list.length" />
            <!-- 空的状态 -->
            <u-empty v-if="list.length===0 && status=== 'nomore'" mode="list" marginTop="200rpx"></u-empty>
          </scroll-view>
          <!-- 滚动商品容器 E-->
      </view>
      <!-- 右侧 E-->
    </view>
    <!-- 容器区域 E -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        searchShow: false,
        wh: 0, // 窗口高度
        searchHeight: 0, // 搜索框的高度
        imgHeight: 0, // 分类图片高度
        cateList: [], // 全部分类列表
        activeCate: {}, // 激活分类信息
        // 商品列表相关参数
        count: 0, // 总数
        currentPage: 1, // 页码
        pageSize: 8, // 每页数量
        list: [], // 商品列表
        status: 'loadmore'
      };
    },
    // 挂载完成
    mounted() {
      // 获取设备信息
      uni.getSystemInfo({
        success: (res) => {
          this.wh = res.windowHeight
        }
      })
      // 得到选择器对象:通过uni.createSelectorQuery().in(this).select("选择器") 获取节点
      const query = uni.createSelectorQuery().in(this)
      // 找到搜索框，调用boundingClientRect，回调里面的形参data就是想要的组件节点数据了
      query.select('#mySearch').boundingClientRect(data => {
        // console.log(data)
        this.searchHeight = data.height
      }).exec()
      // 找分类图片高度
      query.select('.cateImg').boundingClientRect(data => {
        this.imgHeight = data.height
      }).exec()
    },
    onShow() {
      // 创建搜索组件
      this.searchShow = true
      // 调用全部分类方法
      this.getAllCate()
    },
    onHide() {
      // 销毁搜索组件
      this.searchShow = false
      // 页面关闭的时候请求本地分类ID
      uni.removeStorageSync('cateId')
    },
    methods: {
      // 2. 定义获取全部分类方法
      async getAllCate() {
        const res = await uni.$http.get('/catalog/index')
        this.cateList = res.categoryList
        // 只有当有数据才确定激活分类信息
        if (this.cateList.length) {
          // 从本地取出cateId
          const cateId = uni.getStorageSync('cateId')
          if (cateId) {
            // 是从首页点击了分类项目或者分类标题跳转来的
            const row = this.cateList.find(item => item.id === cateId)
            this.changeActive(row)
          } else {
            this.activeCate = this.cateList[0]
            // 获取激活分类下商品列表
            this.getGoodList()
          }
        }
      },
      // 获取激活分类下的商品列表
      async getGoodList() {
        // console.log(this.activeCate.id);
        this.status = 'loading'
        // 请求数据
        const res = await uni.$http.post('/catalog/currentlist', {
          id: this.activeCate.id,
          page: this.currentPage,
          size: this.pageSize
        })
        // console.log(res)
        // 赋值
        this.list = [...this.list, ...res.data]
        this.count = res.count
        // 判断状态
        if (this.list.length >= this.count) {
          this.status = 'nomore'
        } else {
          this.status = 'loadmore'
        }
      },
      // 加载更多数据
      loadMore() {
        console.log('滚动加载更多数据')
        // 只有status为loadmore表示可以继续加载 loading 加载中 nomore 没有了
        if (this.status !== 'loadmore') return
        // 可以加载，增加页码，获取下一页数据
        this.currentPage++
        this.getGoodList()
      },
      // 左侧点击激活切换
      changeActive(row) {
        // 修改激活分类信息
        this.activeCate = row
        // 重置相关数据
        this.count = 0
        this.list = []
        this.status = 'loadmore'
        this.currentPage = 1
        // 重新获取列表 
        this.getGoodList()
      }
    }
  }
</script>

<style lang="scss">
  .cateContainer {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;

    .boxContainer {
      display: flex;
      flex: 1;

      .nav {
        width: 180rpx;
        border-right: 1rpx solid #fafafa;
        height: 100%;

        view {
          line-height: 100rpx;
          text-align: center;
          color: #333;
          font-size: 30rpx
        }

        .active {
          color: #409eff;
          font-size: 32rpx
        }
      }

      .cate {
        flex: 1;
        padding: 0 20rpx;
        height: 100%;
        flex-direction: column;

        .cateImg {
          width: 100%;
          height: 160rpx;
        }

        .listBox {
          flex: 1;
        }
      }
    }
  }
</style>
